<template>
  <div :class="{ fixedTop: fixedTop }" ref="headerTop">
    <v-app-bar
      class="safeHeader_wms"
      dark
      flat
      fixed
      :style="headerStyle"
      :color="color"
      :textColor="textColor"
    >
      <v-row
        class="justify-space-between flex-nowrap ma-0 pa-0"
        v-if="type == 'title'"
      >
        <v-col cols="2" class="d-flex align-center justify-start pa-0 pl-2">
          <v-icon :color="textColor" v-if="isBack" @click="goBack">{{
            mdiChevronLeft
          }}</v-icon>
          <slot name="left" v-else></slot
        ></v-col>

        <v-col
          :style="`color:${textColor}; font-size:18px !important; font-family:PingFang SC bold`"
          class="
            subtitle-1
            text-center
            d-flex
            align-center
            justify-center
            font-weight-bold
            pa-1
          "
        >
          {{ title }}
        </v-col>
        <v-col cols="2" class="d-flex align-center justify-end pa-0 pr-1">
          <slot name="right"></slot>
        </v-col>
      </v-row>

      <v-row
        v-else-if="type == 'doubleTitle'"
        class="justify-space-between flex-nowrap ma-0 pa-0"
        :style="`color:${textColor};`"
      >
        <v-col
          class="d-flex align-center justify-start pa-0 pl-2 leftHeaderClass"
        >
          <slot name="left"></slot>
        </v-col>
        <v-col
          class="d-flex align-center justify-end pa-0 pr-2 rightHeaderClass"
        >
          <slot name="right"></slot>
        </v-col>
      </v-row>
    </v-app-bar>
  </div>
</template>

<script>
import { mdiChevronLeft } from "@mdi/js";
export default {
  name: "SafeHeader",
  props: {
    type: {
      type: String,
      default: () => {
        return "title";
      },
      validator(val) {
        return ["title", "doubleTitle"].indexOf(val) !== -1;
      },
    },
    title: {
      type: String,
      default: () => {
        return "";
      },
    },
    color: {
      // color和textColor 的设置，参照 https://muse-ui.org/#/zh-CN/color
      type: String,
      default: () => {
        return "#193690";
      },
    },
    textColor: {
      type: String,
      default: () => {
        return "#fff";
      },
    },
    fixedTop: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    isBack: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    backIconColor: {
      type: String,
      default: () => {
        return "";
      },
    },
    leftClass: {
      type: String,
      default: () => {
        return "";
      },
    },
    rightClass: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  data: () => {
    return {
      paddingTop: 0,
      mdiChevronLeft: mdiChevronLeft,
    };
  },
  computed: {
    headerStyle() {
      return {
        paddingTop: this.paddingTop + "px",
        height: this.paddingTop + 56 + "px",
      };
    },
  },
  methods: {
    goBack() {
      // if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
      //   window.api.closeWin();
      // } else {
      //   this.$root.api.api.closeWin();
      // }
       if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.closeWin();
      } else {
        // 回到首页 123123
        this.$root.api.api.openWin({
        name: "MainTab",
        url: "./MainTab.html",
      });
      }
    },
  },
  mounted() {
    console.log(this.$refs);
    this.paddingTop = window.api ? window.api.safeArea.top : 0;
    if (this.$refs.headerTop.nextSibling != null) {
      this.$refs.headerTop.nextSibling.style.paddingTop =
        (this.fixedTop
          ? this.paddingTop + this.$refs.headerTop.offsetHeight + 56
          : 0) + "px";
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep .v-app-bar-title {
  font-size: 18px;
  margin-left: -20px;
}
.v-app-bar {
  width: 100%;
}
.fixedTop {
  position: fixed;
  width: 100%;
  background: #e8e8e8f1;
  z-index: 100;
}
::v-deep .v-toolbar__content {
  padding: 4px;
}
</style>
<style>
.fixedTop + * {
  padding-top: 80px;
}
.v-app-bar-title {
  text-align: center;
  margin-right: 2rem;
}
.leftHeaderClass {
  font-size: 18px;
  font-weight: bold;
}
.rightHeaderClass {
  font-size: 18px;
  font-weight: bold;
}
</style>

